<template>
    <div class="">
        <router-view></router-view>
        <van-tabbar class="tabbar" route active-color="#FC6627" inactive-color="#3A3948">
            <van-tabbar-item to="/article">
                <span>首页</span>
                <template #icon="props">
                    <img :src="props.active ? icon[0].active : icon[0].inactive"/>
                </template>
            </van-tabbar-item>
            <van-tabbar-item to="/question">
                <span>问答</span>
                <template #icon="props">
                    <img :src="props.active ? icon[1].active : icon[1].inactive"/>
                </template>
            </van-tabbar-item>
            <van-tabbar-item to="/video">
                <span>视频</span>
                <template #icon="props">
                    <img :src="props.active ? icon[2].active : icon[2].inactive"/>
                </template>
            </van-tabbar-item>
            <van-tabbar-item to="/user">
                <span>我的</span>
                <template #icon="props">
                    <img :src="props.active ? icon[3].active : icon[3].inactive"/>
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
export default {
    name: 'LayoutPage',
    data () {
        return {
            icon: [
                {
                    active: require('/src/assets/img/btn_home_sel.svg'),
                    inactive: require('/src/assets/img/btn_home.jpg')
                },
                {
                    active: require('/src/assets/img/btn_q&a_sel.svg'),
                    inactive: require('/src/assets/img/btn_q&a.svg')
                },
                {
                    active: require('/src/assets/img/btn_video_sel.svg'),
                    inactive: require('/src/assets/img/btn_video.svg')
                },
                {
                    active: require('/src/assets/img/btn_mine_sel.svg'),
                    inactive: require('/src/assets/img/btn_mine.svg')
                }
            ]
        }
    }

}
</script>

<style scoped lang="less">
* {
    box-sizing: border-box;
}

.tabbar {
    height: 46px;
}

::v-deep .van-tabbar--fixed {
    border: 1px solid #F0F0F0;
}
</style>
